<div class="jumbotron">
	<h1>Here Are The Care Facilities In Your Selected Area</h1>
	<p>You can see important information for each facility below. This list is sorted by the quality of care, as marked by each facility's rating. You can also view more information about a facility by selecting it.</p>
	<p>You can change how the list is displayed by selecting 'Cards' or 'Table'.</p>
</div>
<div>
	<tabs>
    	<pane title="Cards">
    		<!--card-->
    		<ul class="list-inline">
				<li ng-repeat="provider in providers" class='card-style col-md-6'>
    					<a class="black" href="#/providers/{{provider.provnum}}">
	    					<div class='top-card'>

							<div class='card-title pull-left'>ADDRESS:</div>
							<div class='card-exp pull-left'>
								{{provider.address}}
							</div>

							<div class='card-title pull-left'>CITY:</div>
							<div class='card-exp pull-left'>
								{{provider.city}}, {{provider.state}}
							</div>

							<div class='card-title pull-left'>ZIP: </div>
							<div class='card-exp pull-left'>
								{{provider.zip}}
							</div>

							<div class='card-title pull-left'>RATING: </div>
							<div class='card-exp pull-left'>
								<div class='pull-left' ng-repeat="sup in looper(provider.custom_score)">
									<ul class="list-inline">
										<li>
											<img class='star' src='web-sdk/assets/img/star.png'>
										</li>
									</ul>
								</div>
							</div>

							<div ng-repeat="code in item.IndustryCode">
					  			<div ng-repeat="description in code.IndustryCodeDescription">
					  				<div class='card-title pull-left'>DESCRIPTION: </div>
					  				<div class='card-exp pull-left'>{{description.$}}</div>
					  			</div>
					     	</div>

						</div>
					</a>
					<div class='bottom-card'>
						<div class='org-name'>
							{{provider.provname}}
						</div>
					</div>
				</li>
			</ul>

		</pane>
    	<pane title="Table">

    		<!--table-->
    		<div class="table-responsive">
				<table class="table table-bordered table-hover table-striped tablesorter">
					  <tr>
						<th>Options</th>
					    <th>Name</th>
					    <th>Address</th>
					    <th>City</th>
					    <th>State</th>
					    <th>Zip</th>
					    <th>Rating</th>
					  </tr>
				  	<tr ng-repeat="provider in providers">
						<td><a class="btn btn-xs white" href="#/providers/{{provider.provnum}}">View</a></td>
						<td>{{provider.provname}}</td>
						<td>{{provider.address}}</td>
						<td>{{provider.city}}</td>
						<td>{{provider.state}}</td>
						<td>{{provider.zip}}</td>
						<td>{{provider.custom_score}}</td>
					
					</tr>
				</table>
			</div>

    	</pane>
	</tab>
</div>
